@for $i from 1 through 12 {
  .camera-cir12-#{$i} {
    animation: cir12-#{$i} 20s linear infinite;
  }
  @keyframes cir12-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*30}deg) scale(0.5);
    }
    25% {
      transform: rotateY(#{(1-$i)*30-90}deg) scale(0.5);
    }
    50% {
      transform: rotateY(#{(1-$i)*30-180}deg) scale(0.5);
    }
    75% {
      transform: rotateY(#{(1-$i)*30-270}deg) scale(0.5);
    }
    100% {
      transform: rotateY(#{(1-$i)*30-360}deg) scale(0.5);
    }
  }
}

//11
@for $i from 1 through 11 {
  .camera-cir11-#{$i} {
    animation: cir11-#{$i} 20s linear infinite;
  }
  @keyframes cir11-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/11)}deg) scale(0.55);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/11)-90}deg) scale(0.55);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/11)-180}deg) scale(0.55);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/11)-270}deg) scale(0.55);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/11)-360}deg) scale(0.55);
    }
  }
}

//10
@for $i from 1 through 10 {
  .camera-cir10-#{$i} {
    animation: cir10-#{$i} 20s linear infinite;
  }
  @keyframes cir10-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/10)}deg) scale(0.6);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/10)-90}deg) scale(0.6);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/10)-180}deg) scale(0.6);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/10)-270}deg) scale(0.6);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/10)-360}deg) scale(0.6);
    }
  }
}

//9
@for $i from 1 through 9 {
  .camera-cir9-#{$i} {
    animation: cir9-#{$i} 20s linear infinite;
  }
  @keyframes cir9-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/9)}deg) scale(0.6);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/9)-90}deg) scale(0.6);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/9)-180}deg) scale(0.6);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/9)-270}deg) scale(0.6);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/9)-360}deg) scale(0.6);
    }
  }
}

//8
@for $i from 1 through 8 {
  .camera-cir8-#{$i} {
    animation: cir8-#{$i} 20s linear infinite;
  }
  @keyframes cir8-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/8)}deg) scale(0.6);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/8)-90}deg) scale(0.6);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/8)-180}deg) scale(0.6);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/8)-270}deg) scale(0.6);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/8)-360}deg) scale(0.6);
    }
  }
}

//7
@for $i from 1 through 7 {
  .camera-cir7-#{$i} {
    animation: cir7-#{$i} 20s linear infinite;
  }
  @keyframes cir7-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/7)}deg) scale(0.6);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/7)-90}deg) scale(0.6);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/7)-180}deg) scale(0.6);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/7)-270}deg) scale(0.6);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/7)-360}deg) scale(0.6);
    }
  }
}

//6
@for $i from 1 through 6 {
  .camera-cir6-#{$i} {
    animation: cir6-#{$i} 20s linear infinite;
  }
  @keyframes cir6-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/6)}deg) scale(0.7);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/6)-90}deg) scale(0.7);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/6)-180}deg) scale(0.7);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/6)-270}deg) scale(0.7);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/6)-360}deg) scale(0.7);
    }
  }
}

//5
@for $i from 1 through 5 {
  .camera-cir5-#{$i} {
    animation: cir5-#{$i} 20s linear infinite;
  }
  @keyframes cir5-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/5)}deg) scale(0.7);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/5)-90}deg) scale(0.7);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/5)-180}deg) scale(0.7);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/5)-270}deg) scale(0.7);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/5)-360}deg) scale(0.7);
    }
  }
}

//4
@for $i from 1 through 4 {
  .camera-cir4-#{$i} {
    animation: cir4-#{$i} 20s linear infinite;
  }
  @keyframes cir4-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/4)}deg) scale(0.8);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/4)-90}deg) scale(0.8);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/4)-180}deg) scale(0.8);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/4)-270}deg) scale(0.8);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/4)-360}deg) scale(0.8);
    }
  }
}

//3
@for $i from 1 through 3 {
  .camera-cir3-#{$i} {
    animation: cir3-#{$i} 20s linear infinite;
    transition-delay: #{(1-$i)*100}ms !important;
  }
  @keyframes cir3-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/3)}deg) scale(0.8);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/3)-90}deg) scale(0.8);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/3)-180}deg) scale(0.8);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/3)-270}deg) scale(0.8);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/3)-360}deg) scale(0.8);
    }
  }
}

//2
@for $i from 1 through 2 {
  .camera-cir2-#{$i} {
    animation: cir2-#{$i} 20s linear infinite;
  }
  @keyframes cir2-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/2)}deg) scale(0.8);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/2)-90}deg) scale(0.8);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/2)-180}deg) scale(0.8);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/2)-270}deg) scale(0.8);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/2)-360}deg) scale(0.8);
    }
  }
}

@for $i from 1 through 1 {
  .camera-cir1-#{$i} {
    animation: cir1-#{$i} 20s linear infinite;
  }
  @keyframes cir1-#{$i} {
    0% {
      transform: rotateY(#{(1-$i)*(360/1)}deg) scale(0.8);
    }
    25% {
      transform: rotateY(#{(1-$i)*(360/1)-90}deg) scale(0.8);
    }
    50% {
      transform: rotateY(#{(1-$i)*(360/1)-180}deg) scale(0.8);
    }
    75% {
      transform: rotateY(#{(1-$i)*(360/1)-270}deg) scale(0.8);
    }
    100% {
      transform: rotateY(#{(1-$i)*(360/1)-360}deg) scale(0.8);
    }
  }
}
